<template>
  <el-dialog :visible.sync="visible" title="属性配置" width="700px"
  :append-to-body="true"
  :close-on-click-modal="false"
  :close-on-press-escape="false"
  :center="true"
  @opened="handleDialogOpened">
    <div style="height: 500px; overflow: auto;">
      <el-collapse v-model="activeCollapseNames">
        <el-collapse-item title="SVG属性" name="svg">
          <dynamic-form-panel ref="svgFormPanel"></dynamic-form-panel>
        </el-collapse-item>
        <el-collapse-item title="样式属性" name="style">
          <dynamic-form-panel ref="styleFormPanel"></dynamic-form-panel>
        </el-collapse-item>
      </el-collapse>
    </div>

    <div slot="footer">
      <el-button type='primary' @click='handleConfirm'>确定</el-button>
      <el-button type='danger' @click='handleCancel'>取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
var _ = require('lodash')
import ConfigUtil from '@/utils/graph-utils/configUtil.js'
import GraphUtil from '@/utils/graph-utils/graphUtil'
import DynamicFormPanel from '@/views/drawTool/dialog/component/dynamic-form-panel.vue'

export default {
  name: 'AttrsConfigDialog',
  components: { DynamicFormPanel },
  data() {
    return {
      visible: false,
      index: '',
      tagName: '', // svg片段类型
      tagAttrs: '', // svg片段已配置的属性

      activeCollapseNames: ['svg', 'style']
    }
  },
  methods: {
    showDialog(index, tagName, tagAttrs) {
      this.index = index
      this.tagName = tagName || ''
      this.tagAttrs = tagAttrs || {}
      this.visible = true
    },

    handleDialogOpened() {
      // 获取对象目前已配置的svg属性和样式属性
      const svgForms = []
      const styleForms = []
      _.forIn(this.tagAttrs, function(value, key) {
        if (key === 'style') {
          if (_.isObject(value)) {
            _.forIn(value, function(styleValue, styleKey) {
              styleForms.push({
                name: styleKey,
                value: styleValue
              })
            })
          } else if (_.isString(value)) {
            const objStyle = GraphUtil.formatStrStyle2ObjStyle(value)
            _.forIn(objStyle, function(value, key) {
              styleForms.push({
                name: key,
                value: value
              })
            })
          }
        } else if (key === 'fill' || key.indexOf('stroke') !== -1 || key.indexOf('font') !== -1) {
          styleForms.push({
            name: key,
            value: value
          })
        } else {
          svgForms.push({
            name: key,
            value: value
          })
        }
      })
      const svgOptions = ConfigUtil.getSvgAttrs(this.tagName)
      const styleOptions = ConfigUtil.getStyleAttrs(this.tagName)
      this.$refs.svgFormPanel.setPanelInfos(svgForms, svgOptions)
      this.$refs.styleFormPanel.setPanelInfos(styleForms, styleOptions)
    },

    // 获取配置的属性信息
    getAttrInfos() {
      const svgInfos = this.$refs.svgFormPanel.getPanelInfos()
      const styleInfos = this.$refs.styleFormPanel.getPanelInfos()
      const infos = _.cloneDeep(svgInfos)
      let styleValue = ''
      _.forIn(styleInfos, function(value, key) {
        styleValue += key + ':' + value + ';'
      })
      _.set(infos, 'style', styleValue)
      return infos
    },

    handleConfirm() {
      const infos = this.getAttrInfos()
      this.$emit('submit', this.index, infos)
      this.visible = false
    },

    handleCancel() {
      this.visible = false
    }
  }
}
</script>